<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="cardNewestComments">
<!-- 最近评论 -->
    <script
        th:if="${theme.config.comments.twikooEnable
        && #strings.equals(theme.config.comments.use, 'Twikoo')
        && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
    window.addEventListener('load', () => {
        const changeContent = (content) => {
            if (content === '') return content

            content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
            content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
            content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
            content = content.replace(/<[^>]+>/g, "") // remove html tag

            if (content.length > 150) {
                content = content.substring(0, 150) + '...'
            }
            return content
        }

        const getComment = () => {
            const runTwikoo = () => {
                twikoo.getRecentComments({
                    envId: "[(${theme.config.comments.twikoos.envId})]",
                    region: '',
                    pageSize: 6,
                    includeReply: true
                }).then(function (res) {
                    const twikooArray = res.map(e => {
                        return {
                            'content': changeContent(e.comment),
                            'avatar': e.avatar,
                            'nick': e.nick,
                            'url': e.url + '#' + e.id,
                            'date': new Date(e.created).toISOString()
                        }
                    })

                    saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
                    generateHtml(twikooArray)
                }).catch(function (err) {
                    const $dom = document.querySelector('#card-newest-comments .aside-list')
                    $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
                })
            }

            if (typeof twikoo === 'object') {
                runTwikoo()
            } else {
                getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
            }
        }

        const generateHtml = array => {
            let result = ''

            if (array.length) {
                for (let i = 0; i < array.length; i++) {
                    result += '<div class=\'aside-list-item\'>'

                    if (true) {
                        const name = 'src'
                        result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
                    }

                    result += `<div class='content'>
                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
                </div>`
                }
            } else {
                result += '没有评论'
            }

            let $dom = document.querySelector('#card-newest-comments .aside-list')
            $dom.innerHTML = result
            window.lazyLoadInstance && window.lazyLoadInstance.update()
            window.pjax && window.pjax.refresh($dom)
        }

        const newestCommentInit = () => {
            if (document.querySelector('#card-newest-comments .aside-list')) {
                const data = saveToLocal.get('twikoo-newest-comments')
                if (data) {
                    generateHtml(JSON.parse(data))
                } else {
                    getComment()
                }
            }
        }

        newestCommentInit()
        document.addEventListener('pjax:complete', newestCommentInit)
    })</script>

</th:block>
</html>